
<template>
  <div>
    <!--    显示图片-->
    <div class="slot">
      <el-table :data="fileList"  style="width:100%">
        <el-table-column prop="fileName" label="名称"></el-table-column>
        <el-table-column prop="ext" label="类型"></el-table-column>
        <el-table-column prop="size" label="大小"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="previewImage(scope.row)">预览</el-button>
            <el-button type="primary" size="mini" @click="downloadFile(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--      上传附件-->
    <previewPicture ref="dialogs"></previewPicture>
  </div>
</template>


<script>
import previewPicture from "./previewPicture";
export default {
  name: "ShowFileList",
  data(){
    return {
    }
  },
  props:['fileList',],
  components: {previewPicture},
  methods:{
    //预览图片
    previewImage(img){
      let ext = img.ext
      if(ext == 'doc' || ext == 'docx' || ext == 'ppt' || ext == 'pptx' || ext == 'xls' || ext == 'xlsx'){
        this.fun.previewOffice(img.fileUrl)
      }else{
        this.$refs.dialogs.visable=true
        this.$refs.dialogs.img_path = img.fileUrl
      }
    },
    //下载图片
    downloadFile(file){
      let url = file.fileUrl
      let fileName = file.fileName
      this.fun.downloadFile(url,fileName)
    },
  },
}
</script>

<style>
</style>
